<template>
  <div class="front-page-container">
    <GoodsSourse2 :cgoods="goods" />
    <div class="right-info">
      <div class="free-btn">
        <img src="../assets/img/fabuxinxi2.png" @click="toPublish" />
      </div>
      <div class="top-info">
        <div style="font-size: 18px"><strong>近期热门信息</strong></div>
        <div
          class="item-info"
          v-for="(item, index) in goodsTopics"
          :key="index"
        >
          {{ index + 1 }}、{{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
// import { selectAllPage, selectGoodsPage } from '../api/order';
import GoodsSourse2 from "../components/GoodsSource2.vue";

const router = useRouter();

const goods = ref([]);
const goodsTopics = ref([]);
const total = ref(0);
const searchValue = ref("");

import { useOrdersStore } from "@/stores/order";
const ordersStore = useOrdersStore();
goodsTopics.value = ordersStore.orders.records;

</script>

<style lang="scss" scoped>
.front-page-container {
  display: flex;
  // flex-direction: row;
  justify-content: space-between;
  width: 1300px;
  margin: 10px auto;
}

.front-page {
  width: 780px;
  margin: 0 auto;
}

.item-info {
  line-height: 25px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  &:hover {
    color: #035d1c;
    text-decoration: none;
  }
}

.right-info {
  padding: 10px 20px;
  // height: 1000px;
  width: 300px;
  min-height: 360px;
  background-color: #fff;
  .free-btn {
    text-align: center;
    cursor: pointer;
  }
  .top-info {
    font-size: 12px;
    margin-top: 20px;
  }
}
</style>